2016-05-19

React Native环境搭建

安装

Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

1	/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

1	sudo chown -R `whoami` /usr/local

Node

Node使用Homebrew来安装Node.js.在安装完成了Node后，会自动安装node的包管理工具npm

1	brew install node

React Native的命令行工具（react-native-cli)

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

1	npm install -g react-native-cli

如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：

1	sudo chown -R `whoami` /usr/local

Nuclide

Nuclide（此链接需要科学上网）是由Facebook提供的基于atom的集成开发环境，可用于编写、运行和调试React Native应用

译注：我们更推荐使用WebStorm或Sublime Text来编写React Native应用。

创建React - Native Project

React-native-cli创建项目

1
2
3

react-native init AwesomeProject(项目名称)
cd AwesomeProject
react-native run-ios

你也可以在Nuclide中打开AwesomeProject文件夹然后运行，或是双击ios/AwesomeProject.xcodeproj文件然后在Xcode中点击Run按钮。

使用你喜欢的编辑器打开index.ios.js并随便改上几行.
在iOS Emulator中按下⌘-R就可以刷新APP并看到你的最新修改！

React-native-cocoaPods

1.进入项目根目录，创建node的package.json

1
2
3

npm init
npm install react-native --save-dev 
npm install react --save-dev

执行以上命令后，会在跟目录生成package.json文件，以及node_modules文件

2.进入podfile中添加如下：

pod ‘React’,:path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他RN库
]

3.在根目录下创建index.ios.js文件，具体的内容可以参看方式一的自动生成的内容。

4.进入server服务，进入node_modules/react-native/local-cli/server，执行

npm start

启动服务器，当看到控制台中出现：React packager ready表示启动服务成功

5.在info.plist中添加 AppTransport Security Settings 在其下再添加 Allow Arbitrary Loads选择为 yes，修改网络可以使用http请求

6.在需要的地方加入如下代码：

NSURL *jsCodeLocation;

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName:@"startRN"
                                             initialProperties:nil
                                                 launchOptions:nil];
[self.view addSubview:rootView];

7.启动模拟器在使用RN的地方，即可看到效果.

参考

1.React Native 中文网搭建开发环境

2.ReactNative-Cocoapods-Swift-Project项目搭建

Tortoise